<template>
	<view>
		<uni-popup ref="bottom" borderRadius="20px 20px 0px 0px" background-color="#fff">
			<view class="dibu p20">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						温馨提示
					</view>
					<image src="../../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="f12 co--7676 p20">
					我已阅读并同意 <span class="co-zhu" @click="goto('/pages/index/agreement')">《用户协议》</span> 和 <span
						class="co-zhu" @click="goto('/pages/index/agreement')">《隐私政策》</span>，并同意衡聘网授权本机号码
				</view>
				<button @click="toyi" class=" mt30 ba-zhu color--fff br--50 ">同意并登录</button>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="popup" :maskClick="false" background-color="#fff" @change="change"> -->
		<view class="popup-content bag--fff p20">
			<view class="fw f24 mt60">
				验证码登录
			</view>
			<view class="f12 co-aaa mt10">
				请使用手机验证码登录
			</view>
			<view class="mt60 p20">
				<u-form labelPosition="left" :model="model" :rules="rules" ref="uForm">
					<u-form-item label="手机号" labelWidth="50" prop="userInfo.mobile" ref="item1">
						<u-input placeholder="请输入手机号" v-model="model.userInfo.mobile"
							prefixIconStyle="font-size: 40rpx;color: #aaa" class="inp ml10">
						</u-input>
					</u-form-item>
					<u-form-item label="验证码" labelWidth="50" prop="userInfo.code" ref="item1">
						<u-input placeholder="请输入验证码" v-model="model.userInfo.code"
							prefixIconStyle="font-size: 40rpx;color: #aaa" class="inp ml10">
							<template slot="suffix">
								<u-button @tap="getCode" text="发送验证码" class="but" size="mini"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<button @click="submit" class=" mt50 ba-zhu color--fff br--50">登录</button>
			<view class="flex mt40" @click="flag=!flag">
				<image :src="flag?'../../../static/vvv.png':'../../../static/vv.png'" mode="aspectFill"
					class="img15 mr10">
				</image>
				<view class="f12 co--7676">
					我已阅读并同意 <span class="co-zhu" @click.stop="goto(`/pages/index/agreement?id=${0}`)">《用户协议》</span> 和
					<span class="co-zhu" @click.stop="goto('/pages/index/agreement')">《隐私政策》</span>，并同意衡聘网授权本机号码
				</view>
			</view>
		</view>
		<!-- </uni-popup> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				flag: false,
				model: {
					userInfo: {
						mobile: '18203336000',
						code: '6666',
					},
				},
				rules: {
					'userInfo.mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '手机号码不正确',
						}
					],
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
				},
			}
		},
		methods: {
			change() {

			},
			close() {
				this.$refs.bottom.close()
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					if (this.flag) {
						this.login()

					} else {
						this.$refs.bottom.open('bottom')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			toyi() {
				this.login()
			},
			async login() {
				let data = await this.$rqt.login(this.model.userInfo)
				console.log(data, 'sss')
				this.$store.commit('setToken', data.data.token)
				this.$store.commit('setuser', data.data)
				if (data.code == 1) {

					uni.$u.toast('登录成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					uni.$u.toast('登录失败')
				}
			},
			// 发送验证码
			getCode() {

			}

		},
		onLoad() {
			// this.$refs.popup.open('top')
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 40rpx;
		height: 898rpx;
	}


	::v-deep .u-border {
		border: none;
		background: #F5F5F5;
		// background-color: ;
	}

	::v-deep .u-input--radius {
		border-radius: 42rpx !important;
	}

	::v-deep .u-input {
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	::v-deep .u-button {
		// width: 192rpx !important;
		height: 56rpx !important;
		border-radius: 28rpx !important;
		background: #0256FF !important;
		color: #fff !important;
		font-size: 28rpx;
	}
</style>